<template>
  <div class='container'>
    <div class="box">
      <div class="pan-top">
        <el-row class="row1">
				  <el-col :span="6">
				  	<div class="top1">
				  		<p class="twoP">
                <span>本月目标保费</span>
                <span @click="toset">目标设定</span>
              </p>
				  		<p class="topP" v-loading="loading1" v-if="monthTarget">{{monthTarget | numFilter}}<span>万元</span></p>
				  		<p class="topP" v-loading="loading1" v-else>- -</p>
				  	</div>
				  </el-col>
				  <el-col :span="6">
				  	<div class="top1">
				  		<p>本月已完成保费</p>
				  		<p class="topP haveC" v-loading="loading2" v-if="monthTotalPremium">{{monthTotalPremium | numFilter}}<span>万元</span></p>
              <p class="topP" v-loading="loading1" v-else>- -</p>
				  	</div>
				  </el-col>
				  <el-col :span="6">
				  	<div class="top1">
              <p>本年已完成保费</p>
				  		<p class="topP" v-loading="loading3" v-if="yearTotalPremium">{{yearTotalPremium | numFilter}}<span>万元</span></p>
              <p class="topP" v-loading="loading1" v-else>- -</p>
				  	</div>
				  </el-col>
           <el-col :span="6">
				  	<div class="top2">
              <p>时间进度完成率</p>
				  		<p class="topP haveC" v-loading="loading4" v-if="timeCompletedRate">{{timeCompletedRate}}<span>%</span></p>
              <p class="topP" v-loading="loading1" v-else>- -</p>
				  	</div>
				  </el-col>
				</el-row>
        <el-row class="row2">
				  <el-col :span="6">
				  	<div class="top1">
				  		<p>应完成日任务</p>
				  		<p class="topP" v-loading="loading6" v-if="shouldDay">{{shouldDay | numFilter}}<span>万元</span></p>
              <p class="topP" v-loading="loading1" v-else>- -</p>
				  	</div>
				  </el-col>
				  <el-col :span="6">
				  	<div class="top1">
              <p>已完成日任务</p>
				  		<p class="topP haveC" v-loading="loading7" v-if="completedDay">{{completedDay | numFilter}}<span>万元</span></p>
              <p class="topP" v-loading="loading1" v-else>- -</p>
				  	</div>
				  </el-col>
          <el-col :span="6">
				  	<div class="top1">
				  		<p>剩余日任务</p>
				  		<p class="topP" v-loading="loading5" v-if="lastday">{{lastday | numFilter}}<span>万元</span></p>
              <p class="topP" v-loading="loading1" v-else>- -</p>
				  	</div>
				  </el-col>
           <el-col :span="6">
				  	<div class="top2">
              <p>日任务差额</p>
				  		<p class="topP" v-loading="loading8" v-if="taskbalance">{{taskbalance | numFilter}}<span>万元</span></p>
              <p class="topP" v-loading="loading1" v-else>- -</p>
				  	</div>
				  </el-col>
				</el-row>
      </div>
    </div>
    <div class="box">
      <div class="pan-echarts">
        <!-- <div class="e1">
          <span>设 置： </span>
          <el-select v-model="setVal" placeholder="请选择" size="mini" class="wd150" @change="getval">
            <el-option
              v-for="item in values"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
          <span class="valtodate">{{valtodate}}</span>
        </div> -->
        <div class="e2">
          <span>总保费同比趋势图</span>
          <el-radio-group v-model="radio" size="mini" class="tocenter" @change='getRadio'>
            <el-radio-button label="年"></el-radio-button>
            <el-radio-button label="月"></el-radio-button>
          </el-radio-group>
          <span class="toright" @click="toJump3">更多</span>
        </div>
        <div class="e3">
          <div id='echarts' style="width:100%;height:400px;"></div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="pan-table clearfix">
        <div class="tableleft">
          <div class="tabtitle">
            <span class="t1">保险公司排行榜</span>
            <span class="t2">{{beginDate1}} 至 {{endDate1}}</span>
            <span class="t3" @click="jumpTo1">更多</span>
          </div>
          <el-table class="pandect-table"
            :data="tableData1"
            stripe
            style="width: 100%">
            <el-table-column
              width="50">
              <template slot-scope="scope">
                <span class="firstP" v-if="scope.$index+1 == 1 && scope.row.insuranceName">{{scope.$index+1}}</span>
                <span class="secondP" v-if="scope.$index+1 == 2 && scope.row.insuranceName">{{scope.$index+1}}</span>
                <span class="thirdP" v-if="scope.$index+1 == 3 && scope.row.insuranceName">{{scope.$index+1}}</span>
                <span class="otherP" v-if="scope.$index+1 != 1 && scope.$index+1 != 2 && scope.$index+1 != 3 && scope.row.insuranceName">{{scope.$index+1}}</span>
                <span v-if="!scope.row.insuranceName" class="setH"></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="insuranceName"
              label="保险公司"
              width="150">
            </el-table-column>
            <el-table-column
              label="总保费（万元）"
              align="right">
              <template slot-scope="scope">
                <span v-if='scope.row.totalPremium'>{{scope.row.totalPremium | numFilter}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="保费占比"
              align="right">
              <template slot-scope="scope">
                <span v-if='scope.row.premiumRate'>{{scope.row.premiumRate | keepTwoNum}}%</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- <table border="1" cellspacing='0' cellpadding='0' class="tableborder"> 
            <tr>
              <th width='30%'>保险公司</th>
              <th width='40%'>总保费（万元）</th>
              <th width='30%'>保费占比</th>
            </tr>
            <tr>
              <td class="lefttd">中煤</td>
              <td>4,937,453.89</td>
              <td>21%</td>
            </tr>
            <tr>
              <td class="lefttd">阳光</td>
              <td>2,749,374.09</td>
              <td>10%</td>
            </tr>
            <tr>
              <td class="lefttd">人保</td>
              <td>493,745.19</td>
              <td>8%</td>
            </tr>
            <tr>
              <td class="lefttd">天安</td>
              <td>239,464.82</td>
              <td>6%</td>
            </tr>
            <tr>
              <td class="lefttd">中华联合</td>
              <td>14,537.89</td>
              <td>2.2%</td>
            </tr>
          </table> -->
          <!-- <div class="morediv"><span @click="jumpTo1">查看更多</span></div> -->
        </div>
        <div class="tableright">
          <div class="tabtitle">
            <span class="t1">子机构排行榜</span>
            <span class="t2">{{beginDate2}} 至 {{endDate2}}</span>
            <span class="t3" @click="jumpTo2">更多</span>
          </div>
          <el-table class="pandect-table"
            :data="tableData2"
            stripe
            style="width: 100%">
            <el-table-column
              width="50">
              <template slot-scope="scope">
                <span class="firstP" v-if="scope.$index+1 == 1 && scope.row.displayName">{{scope.$index+1}}</span>
                <span class="secondP" v-if="scope.$index+1 == 2 && scope.row.displayName">{{scope.$index+1}}</span>
                <span class="thirdP" v-if="scope.$index+1 == 3 && scope.row.displayName">{{scope.$index+1}}</span>
                <span class="otherP" v-if="scope.$index+1 != 1 && scope.$index+1 != 2 && scope.$index+1 != 3 && scope.row.displayName">{{scope.$index+1}}</span>
                <span v-if="!scope.row.displayName" class="setH"></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="displayName"
              label="子机构名称"
              width="150">
            </el-table-column>
            <el-table-column
              label="总保费（万元）"
              align="right">
              <template slot-scope="scope">
                <span v-if='scope.row.totalPremium'>{{scope.row.totalPremium | numFilter}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="保费占比"
              align="right">
              <template slot-scope="scope">
                <span v-if='scope.row.premiumRate'>{{scope.row.premiumRate | keepTwoNum}}%</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- <table>
            <tr>
              <th width='30%'>子机构名称</th>
              <th width='40%'>总保费（万元）</th>
              <th width='30%'>保费占比</th>
            </tr>
            <tr>
              <td class="lefttd">石家庄分公司</td>
              <td>574,537.89</td>
              <td>15%</td>
            </tr>
            <tr>
              <td class="lefttd">保定分公司</td>
              <td>324,142.23</td>
              <td>10%</td>
            </tr>
            <tr>
              <td class="lefttd">廊坊分公司</td>
              <td>83,319.01</td>
              <td>7%</td>
            </tr>
            <tr>
              <td class="lefttd">邢台分公司</td>
              <td>23,435.24</td>
              <td>3.1%</td>
            </tr>
            <tr>
              <td class="lefttd">邯郸分公司</td>
              <td>8,347.91</td>
              <td>1.2%</td>
            </tr>
          </table> -->
          <!-- <div class="morediv"><span @click="jumpTo2">查看更多</span></div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      loading6: false,
      loading7: false,
      loading8: false,
      axisX:[],
      intervalnum:null,
      echartsData: {
        expectedData: [],
        actualData: []
      },
      a:'8947932',
      b:'agre',
      chart: null,
      setVal: "1",
      valtodate: "",
      values: [
        {
          id: "1",
          label: "近30天"
        },
        {
          id: "2",
          label: "近7天"
        },
        {
          id: "3",
          label: "近90天"
        },
        {
          id: "4",
          label: "本月"
        },
        {
          id: "5",
          label: "上月"
        },
        {
          id: "6",
          label: "本季度"
        },
        {
          id: "7",
          label: "上季度"
        },
        {
          id: "8",
          label: "本年"
        }
      ],
      now: "", //当前日期
      nowDayOfWeek: "", //今天本周的第几天
      nowDay: "", //当前日
      nowMonth: "", //当前月
      nowYear: "", //当前年
      lastMonthDate: "", //上月日期
      lastYear: "",
      lastMonth: "",
      radio:'年',
      beginDate1:'',
      beginDate2:'',
      endDate1:'',
      endDate2:'',
      tableData1: [],
      tableData2: [],
      monthTarget:'',
      monthTotalPremium:'',
      lastday:'',
      yearTotalPremium:'',
      shouldDay:'',
      completedDay:'',
      taskbalance:'',
      timeCompletedRate:'',
    };
  },
  mounted() {
    this.a = '2017';
    this.b = '2018';
    this.setdateConfig();
    // this.getval("1");
    this.getreport();
    this.getInsCount();
    this.getOrgCount();
    this.getTrendLine();
  },
  filters: {
    numFilter(val) {
      // 截取当前数据到小数点后两位
      // let realVal = Number(val).toFixed(2)
      // num.toFixed(2)获取的是字符串
      // return Number(realVal)
      if(val || val == 0){
        val = val.toString().replace(/\$|\,/g,'');
        if(isNaN(val)) {
          val = "0";  
        }
        let sign = (val == (val = Math.abs(val)));
        val = Math.floor(val*100+0.50000000001);
        let cents = val%100;
        val = Math.floor(val/100).toString();
        if(cents<10) {
            cents = "0" + cents
        }
        for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
            val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
        }

        return (((sign)?'':'-') + val + '.' + cents);
      }
    },
    keepTwoNum:function(val){
      val = Number(val)
      return val.toFixed(2)
    }
  },
  computed: {},
  created() {},
  methods: {
    // getData() {
    //   // if (this.setVal == "1") {
    //   //   this.a = '2017';
    //   //   this.b = '2018';
    //   //   this.echartsData.expectedData = [30,59,72,109,130,118,127,140,143,150,163,168];
    //   //   this.echartsData.actualData = [55,80,102,99,123,134,120];
    //   //   return ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
    //   // }
    //   // if (this.setVal == "2") {
    //   //   this.a = '052341';
    //   //   this.b = '06342';
    //   //   this.echartsData.expectedData = [90, 120, 131, 114, 140, 120, 165];
    //   //   this.echartsData.actualData = [130, 70, 101, 154, 132, 100, 145];
    //   //   return ["11", "2", "三", "四", "5", "6", "7"];
    //   // }
    //   // if (this.setVal == "3") {
    //   //   this.a = '2yue';
    //   //   this.b = '1yue';
    //   //   this.echartsData.expectedData = [60, 80, 101, 84, 140, 160, 75,130,190];
    //   //   this.echartsData.actualData = [130, 70, 101, 154, 132, 100, 145,190,120];
    //   //   return ["1-2", "2", "4-5", "7-8", "9-10", "3-19", "7",'8','9'];
    //   // }
    //   // if (this.setVal == "4") {
    //   //   this.a = '0222';
    //   //   this.b = '0111';
    //   //   this.echartsData.expectedData = [0,80, 121, 114, 140, 110, 165];
    //   //   this.echartsData.actualData = [30, 70, 101, 154, 132, 160, 145];
    //   //   return ["san", "2", "cos", "四", "5--1", "6--3", "7"];
    //   // }
    //   // if (this.setVal == "5") {
    //   //   this.a = '4yue';
    //   //   this.b = '3yue';
    //   //   this.echartsData.expectedData = [88, 90, 131, 84, 100, 110, 115];
    //   //   this.echartsData.actualData = [50, 70, 131, 54, 72, 80, 135];
    //   //   return ["1", "2", "三", "四", "53", "63", "73"];
    //   // }
    //   // if (this.setVal == "6") {
    //   //   this.a = '0512';
    //   //   this.b = '06324';
    //   //   this.echartsData.expectedData = [10, 20, 35,64, 100, 120, 105];
    //   //   this.echartsData.actualData = [30, 50, 88, 184, 132, 112, 105];
    //   //   return ["3", "2", "三1", "四2", "53", "64", "75"];
    //   // }
    //   // if (this.setVal == "7") {
    //   //   this.a = '555';
    //   //   this.b = '6666';
    //   //   this.echartsData.expectedData = [45, 245, 134, 134, 140, 90, 110];
    //   //   this.echartsData.actualData = [132, 143, 191, 94, 132, 110, 140];
    //   //   return ["1111", "211", "三11", "四11", "511", "611", "711"];
    //   // }
    //   // if (this.setVal == "8") {
    //   //   this.a = '13232';
    //   //   this.b = '23333';
    //   //   this.echartsData.expectedData = [40, 140, 131, 114, 140, 120, 165];
    //   //   this.echartsData.actualData = [40, 70, 21, 154, 122, 100, 145];
    //   //   return ["113", "243", "三fjaio", "四", "5cc", "6dd", "gg7"];
    //   // }
    // },
    loadEchart() {
      // this.chart = echarts.init(document.getElementById('echarts','macarons'))
      this.chart = echarts.init(document.getElementById("echarts"));
      this.setOptions(this.axisX,this.a,this.b,this.intervalnum,this.echartsData);
    },
    setOptions(columns,a,b,num,{ expectedData, actualData} = {}) {
      console.log("dsadasdsad-----");
      this.chart.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: columns,
          // boundaryGap: ['20%', '20%'],
          // boundaryGap: true,
          axisTick: {
            show: false
          },
          axisLabel:{
            fontSize:11,
            interval:num
          },
          splitLine:{
            show:true
          },
          // axisLabel:{
          //   rotate:40
          // }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        toolbox: {
            show: true,
            right:20,
            feature: {
                // dataZoom: {
                //     yAxisIndex: 'none'
                // },
                // dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                // restore: {},
                saveAsImage: {}
            }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          },
          //formatter:'{b0}<br/>{a0}：{c0}万元<br/>{a1}：{c1}万元',
          formatter:function(item){
            // console.log(item)
            // console.log('item41000000000000')
            if(item[1]){
               return item[0].name +'<br/>'+item[0].seriesName+"年："+item[0].value+"万元<br/>"+item[1].seriesName+"年："+item[1].value+"万元"
            }else{
               return item[0].name +'<br/>'+item[0].seriesName+"年："+item[0].value+"万元<br/>"
            }
          
          },
          padding: [5, 10]
        },
        yAxis: {
          type: 'value',
          name: '万元',
          axisTick: {
            show: false
          },
          splitLine:{
            show:false
          },
        },
        legend: {
          data: [a, b]
        },
        series: [
          {
            name: a,
            itemStyle: {
              normal: {
                color: "#409EFF",
                lineStyle: {
                  color: "#409EFF",
                  width: 2
                },
              }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(64,158,255,0.5)'
                    }, {
                        offset: 0.3,
                        color: 'rgba(64,158,255,0.1)'
                    },{
                        offset: 1,
                        color: 'rgba(64,158,255,0)'
                    }])
                }
            },
            // smooth: true,
            type: 'line',
            symbolSize:6,
            data: expectedData,
            animationDuration: 2800,
            animationEasing: "cubicInOut"
          },
          {
            name: b,
            // smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: "#EE6000",
                lineStyle: {
                  color: "#EE6000",
                  width: 2
                },
              }
            },
             areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(238,96,0,0.5)'
                    }, {
                        offset: 0.3,
                        color: 'rgba(238,96,0,0.1)'
                    },{
                        offset: 1,
                        color: 'rgba(238,96,0,0)'
                    }])
                }
            },
            data: actualData,
            symbolSize:6,
            animationDuration: 2800,
            animationEasing: "quadraticOut"
          }
        ]
      });
    },
    // getval(val) {
    //   let today = this.getNow();
    //   if (val == "1") {
    //     let a = this.get30();
    //     this.valtodate = a + " 到 " + today;
    //   }
    //   if (val == "2") {
    //     let a = this.get7();
    //     this.valtodate = a + " 到 " + today;
    //   }
    //   if (val == "3") {
    //     let a = this.get90();
    //     this.valtodate = a + " 到 " + today;
    //   }
    //   if (val == "4") {
    //     let a = this.getM();
    //     this.valtodate = a + " 到 " + today;
    //   }
    //   if (val == "5") {
    //     let a = this.getLastMonthStartDate();
    //     let b = this.getLastMonthEndDate();
    //     this.valtodate = a + " 到 " + b;
    //   }
    //   if (val == "6") {
    //     let a = this.getQuarterStartDate();
    //     this.valtodate = a + " 到 " + today;
    //   }
    //   if (val == "7") {
    //     let a = this.getbeforeStartDate();
    //     let b = this.getbeforeEndDate();
    //     this.valtodate = a + " 到 " + b;
    //   }
    //   if (val == "8") {
    //     let a = this.getY();
    //     this.valtodate = a + " 到 " + today;
    //   }
    //   this.getData();
    //   this.loadEchart();
    // },
    // 报表总览
    getreport(){
      let params = {};
      this.post(params,'services/app/report/GetReportOverview').then(rs => {
        if(rs.success){
          if(rs.result){
            this.monthTarget = rs.result.monthTarget;//本月目标保费
            this.monthTotalPremium = rs.result.monthTotalPremium;//本月已完成保费 
            this.lastday = rs.result.lastday;//剩余日任务
            this.yearTotalPremium = rs.result.yearTotalPremium;//本年已完成保费
            this.shouldDay = rs.result.shouldDay;//应完成日任务
            this.completedDay = rs.result.completedDay;//已完成日任务
            this.taskbalance = rs.result.taskbalance;//任务差额
            this.timeCompletedRate = rs.result.timeCompletedRate;//时间进度完成率
          }
        }else{
            this.$notify.error({
              title: "错误",
              message: rs.error.message
            });
        	}
      })
    },
     // 保险公司统计
    getInsCount(){
      let type = 0;
      if(this.radio == '年'){
        type = 1;
      }else if(this.radio == '月'){
        type = 2;
      }
      let params = {
        queryType : type
      }
      this.post(params,'services/app/report/GetInsuranceCount').then(rs => {
        if(rs.success){
          this.beginDate1 = rs.result.beginDate;  
          this.endDate1 = rs.result.endDate;  
          let arr = rs.result.items;
          if(arr.length==5){
            this.tableData1 = arr;
          }else if(arr.length < 5){
            this.tableData1 = arr;
            for(let i=arr.length;i<5;i++){
              this.tableData1.push({});
              // console.log(i);
            }
          }
        }else{
            this.$notify.error({
              title: "错误",
              message: rs.error.message
            });
        	}
      })
    },
     // 子机构统计
    getOrgCount(){
      let type = 0;
      if(this.radio == '年'){
        type = 1;
      }else if(this.radio == '月'){
        type = 2;
      }
      let params = {
        queryType : type
      }
      this.post(params,'services/app/report/GetOrganizationUnitCount').then(rs => {
        if(rs.success){
           if(rs.result){
            this.beginDate2 = rs.result.beginDate;  
            this.endDate2 = rs.result.endDate; 
            let arr = rs.result.items;
            if(arr.length==5){
              this.tableData2 = arr;
            }else if(arr.length < 5){
              this.tableData2 = arr;
              for(let i=arr.length;i<5;i++){
                this.tableData2.push({});
                // console.log(i);
              }
            }
          }
        }else{
            this.$notify.error({
              title: "错误",
              message: rs.error.message
            });
        	}
      })
    },
    getRadio(val){
      console.log(val);
      this.getTrendLine();
      this.getInsCount();
      this.getOrgCount();
    },
    // 折线图
    getTrendLine(){
      let type = 0;
      if(this.radio == '年'){
        type = 1;
      }else if(this.radio == '月'){
        type = 2;
      }
      let params = {
        queryType : type
      }
      this.post(params,'services/app/report/TrendLineChart').then(rs => {
        if(rs.success){
          if(rs.result){
            this.echartsData.expectedData = rs.result.items[0];
            this.echartsData.actualData = rs.result.items[1];
            this.axisX = rs.result.columns ;
            if(type == 1){
              this.intervalnum = 0 ;
              let b = new Date().getFullYear();
              console.log(b);
              console.log(typeof b);
              this.b = b+'';
              this.a = b-1+'';
            }else if(type == 2){
              this.intervalnum = 1 ;
              let b = new Date().getMonth()+1;
              console.log(b);
              console.log(typeof b);
              this.b = b+'月';
              this.a = b-1+'月';
            }
            this.loadEchart();
          }
        }else{
            this.$notify.error({
              title: "错误",
              message: rs.error.message
            });
        	}
      })
    },

    //当前时间
    getNow() {
      var date = new Date();
      var month = date.getMonth() + 1;
      var day = date.getDate() - 1;
      return "0" + month + "-" + day;
    },
    get7() {
      var now = new Date();
      var date = new Date(now.getTime() - 7 * 24 * 3600 * 1000);
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return "0" + month + "-" + day;
    },
    get30() {
      var now = new Date();
      var date = new Date(now.getTime() - 30 * 24 * 3600 * 1000);
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return "0" + month + "-" + day;
    },
    get90() {
      var now = new Date();
      var date = new Date(now.getTime() - 90 * 24 * 3600 * 1000);
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return "0" + month + "-" + day;
    },
    getM() {
      var date = new Date();
      var month = date.getMonth() + 1;
      var day = "01";
      return "0" + month + "-" + day;
    },
    getY() {
      var date = new Date();
      var month = "01";
      var day = "01";
      return month + "-" + day;
    },
    setdateConfig() {
      var now = new Date(); //当前日期
      var nowDayOfWeek = now.getDay(); //今天本周的第几天
      var nowDay = now.getDate(); //当前日
      var nowMonth = now.getMonth(); //当前月
      var nowYear = now.getYear(); //当前年
      nowYear += nowYear < 2000 ? 1900 : 0; //
      var lastMonthDate = new Date(); //上月日期
      lastMonthDate.setDate(1);
      lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
      var lastYear = lastMonthDate.getYear();
      var lastMonth = lastMonthDate.getMonth();
      this.now = now;
      this.nowDayOfWeek = nowDayOfWeek;
      this.nowDay = nowDay;
      this.nowMonth = nowMonth;
      this.nowYear = nowYear;
      this.lastMonthDate = lastMonthDate;
      this.lastYear = lastYear;
      this.lastMonth = lastMonth;
    },
    //格式化日期：yyyy-MM-dd
    formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();
      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      // return (myyear + "-" + mymonth + "-" + myweekday);
      return mymonth + "-" + myweekday;
    },
    //获得本季度的开始月份
    getQuarterStartMonth() {
      var quarterStartMonth = 0;
      if (this.nowMonth < 3) {
        quarterStartMonth = 0;
      }
      if (2 < this.nowMonth && this.nowMonth < 6) {
        quarterStartMonth = 3;
      }
      if (5 < this.nowMonth && this.nowMonth < 9) {
        quarterStartMonth = 6;
      }
      if (this.nowMonth > 8) {
        quarterStartMonth = 9;
      }
      return quarterStartMonth;
    },
    //获得上季度的开始月份
    getBeforeStartMonth() {
      var quarterStartMonth = 0;
      let nowMonth = this.nowMonth - 3;
      if (nowMonth < 3) {
        quarterStartMonth = 0;
      }
      if (2 < nowMonth && nowMonth < 6) {
        quarterStartMonth = 3;
      }
      if (5 < nowMonth && nowMonth < 9) {
        quarterStartMonth = 6;
      }
      if (nowMonth > 8) {
        quarterStartMonth = 9;
      }
      return quarterStartMonth;
    },
    //获得某月的天数
    getMonthDays(myMonth) {
      var monthStartDate = new Date(this.nowYear, myMonth, 1);
      var monthEndDate = new Date(this.nowYear, myMonth + 1, 1);
      var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
      return days;
    },
    //获得上月开始时间
    getLastMonthStartDate() {
      var lastMonthStartDate = new Date(this.nowYear, this.lastMonth, 1);
      return this.formatDate(lastMonthStartDate);
    },
    //获得上月结束时间
    getLastMonthEndDate() {
      var lastMonthDate = new Date(); //上月日期
      lastMonthDate.setDate(1);
      lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
      var lastYear = lastMonthDate.getYear();
      var lastMonth = lastMonthDate.getMonth();
      var lastMonthEndDate = new Date(
        this.nowYear,
        lastMonth,
        this.getMonthDays(lastMonth)
      );
      return this.formatDate(lastMonthEndDate);
    },
    //获得本季度的开始日期
    getQuarterStartDate() {
      var quarterStartDate = new Date(
        this.nowYear,
        this.getQuarterStartMonth(),
        1
      );
      return this.formatDate(quarterStartDate);
    },
    //获得本季度的结束日期
    // getQuarterEndDate() {
    //     var quarterEndMonth = this.getQuarterStartMonth() + 2;
    //     var quarterStartDate = new Date(this.nowYear, quarterEndMonth,
    //             this.getMonthDays(quarterEndMonth));
    //     return this.formatDate(quarterStartDate);
    // },
    //获得上季度的开始日期
    getbeforeStartDate() {
      var quarterStartDate = new Date(
        this.nowYear,
        this.getBeforeStartMonth(),
        1
      );
      return this.formatDate(quarterStartDate);
    },
    //获得上季度的结束日期
    getbeforeEndDate() {
      var quarterEndMonth = this.getBeforeStartMonth() + 2;
      var quarterStartDate = new Date(
        this.nowYear,
        quarterEndMonth,
        this.getMonthDays(quarterEndMonth)
      );
      return this.formatDate(quarterStartDate);
    },
    toset(){
      this.$router.push({
          name: "targetset"
        });
    },
    jumpTo1() {
      // if (this.setVal == "8") {
      //   console.log("月表");
      //   this.$router.push({
      //     name: "pmonthform"
      //   });
      // } else {
      //   console.log("日表");
      //   this.$router.push({
      //     name: "pdayform"
      //   });
      // }
      if(this.radio == '年'){
        this.$router.push({
          name: "pmonthform"
        });
      }else{
        this.$router.push({
          name: "pdayform"
        });
      }
    },
    jumpTo2() {
      // if (this.setVal == "8") {
      //   console.log("月表");
      //   this.$router.push({
      //     name: "zmonthform"
      //   });
      // } else {
      //   console.log("日表");
      //   this.$router.push({
      //     name: "zdayform"
      //   });
      // }
      if(this.radio == '年'){
        this.$router.push({
          name: "zmonthform"
        });
      }else{
        this.$router.push({
          name: "zdayform"
        });
      }
    },
    toJump3(){
      if(this.radio == '年'){
        this.$router.push({
          name: "monthform"
        });
      }else{
        this.$router.push({
          name: "dayform"
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.wd150 {
  width: 150px;
}
.firstP{
  font-size: 14px;
  color: #FFB900;
}
.secondP{
  font-size: 14px;
  color: #B7B5B6;
}
.thirdP{
  font-size: 14px;
  color: #AD6723;
}
.otherP{
  font-size: 14px;
  color: #666666;
}
.setH{
  height: 17px;
  line-height: 17px;
  display: inline-block;
}
.container {
  .box:first-child{
    margin: 24px 20px 0px 20px;
  }
  .box{
    margin: 30px 20px 0px 20px;
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    min-width: 1000px;
    .pan-top {
      .row1,.row2 {
        .top1,.top2{
          height: 100px;
          padding:20px 30px;
          position: relative;
          p:first-child {
            font-size: 13px;
            color: #666666;
            height: 18px;
            line-height: 18px;
            margin-bottom: 10px;
            margin-top: 0;
          }
          .twoP{
            position: relative;
            span:first-child{
              font-size: 13px;
              color: #666666;
            }
            span:last-child{
              font-size: 13px;
              color: #027DCA;
              position: absolute;
              right: 0;
              top:1px;
              cursor: pointer;
            }
          }
          .topP {
            height:33px;
            line-height: 33px;
            display: inline-block;
            font-size: 24px;
            color: #334750;
            margin:0;
            span {
              font-size: 13px;
            }
          }
          .haveC{
            color: #EE6000;
          }
        }
        .top1:after{
          content:'';
          display: block;
          height:50px;
          position: absolute;
          top:25%;
          right: 0;
          border-right: 2px dotted #d9d9d9;
        }
      }
      .row1{
        border-bottom: 2px dotted #D9D9D9;
      }
    }
    .pan-table {
      padding:30px 20px;
      // table,table tr th,
      // table tr td {
      //   // border: 1px solid #ddd;
      //   border:0;
      // }
      // table {
      //   border-collapse: collapse;
      // }
      // table tr th{
      //   background-color:#334750;
      //   color:#fff;
      // }
      .tableleft,
      .tableright {
        float: left;
        width: 47%;
        .tabtitle{
          margin-bottom: 20px;
          .t1{
            font-weight: 600;
            font-size: 18px;
            color:#333;
          }
          .t2{
            font-size: 14px;
            color:#999;
            margin-left:20px;
            vertical-align: middle;
          }
          .t3{
            font-size: 13px;
            color: #027DCA;
            float:right;
            position: relative;
            top:5px;
            cursor: pointer;
          }
        }
        table {
          width: 100%;
          th {
            padding: 10px;
          }
          th:first-child {
            text-align: left;
          }
          th:not(:first-child) {
            text-align: right;
          }
          td {
            padding: 6px 10px;
            text-align: right;
          }
          .lefttd {
            text-align: left;
          }
        }
        // .morediv {
        //   text-align: center;
        //   padding: 6px 10px;
        //   color: #027dca;
        //   border-bottom: 1px solid #ddd;
        //   border-left: 1px solid #ddd;
        //   border-right: 1px solid #ddd;
        //   span {
        //     cursor: pointer;
        //   }
        // }
      }
      .tableleft {
        margin-right: 60px;
      }
    }

    .pan-echarts {
      margin: 30px 20px;
      // .e1 {
      //   .valtodate {
      //     margin-left: 20px;
      //     font-size: 14px;
      //   }
      // }
      .e2 {
        span:first-child{
          font-size: 18px;
          font-weight: 600;
          color:#333;
        }
        .tocenter{
          position: relative;
          top:-3px;
          left:30px;
        }
        .toright{
          font-size: 13px;
          color: #027DCA;
          float:right;
          position: relative;
          top:5px;
          right: 7px;
          cursor: pointer;
        }
      }
    }
  }

}
@media screen and (min-width: 1280px) and (max-width: 1300px) {
  .tableleft,.tableright {
    float: left;
    width: 46% !important;
  }
}
</style>